<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<meta name="renderer" content="webkit"/>
		<meta name="force-rendering" content="webkit"/>
		<title>用户反馈</title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/popup.css"/>
		<script src="js/config.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=5"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=78"></script>
    <script src="js/navbar-component.js?v=2"></script>
    <script src="js/vue/vue-router.js"></script>
    <script src="js/srt.js?v=7"></script>
    <script src="js/moment.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>		
	</head>
	<body >
		<div id="app">
		<div class="yonghufankui">
			<div class="fankui-miaoshu">
				<textarea @keyup="input" class="miaoshu-text" placeholder="请描述您的问题或建议" v-model="content"></textarea>
				<div class="miaoshu-zishu">
					<span>{{hasnum}}</span>/<span>{{200-hasnum}}</span>
				</div>
			</div>			
			<div class="fankui-miaoshu">				
				<img :src="image?image:'img/index/icon_fankui_tianjia.png'" class="tianjia" @click="openFile"/>
				<input type="file" id="file" name="file" style="width:0;height:0;opacity: 0;" @change="upload" />
			</div>
			<div class="fankui-miaoshu">
				<input type="text" v-model="phone" placeholder="请留下联系方式" class="fankui-input"/>
			</div>
			<button class="tijiao-btn" @click="submit">提交</button>
		</div>
		<!-- 弹框 -->
		<div class="likePop" v-show="showSuccess" >
			<div class="pop-mask"></div>
			<div class="likeCont tijiaochengong">
				<p class="likeCont-text d-f a-c-c j-c-c">
					<img src="img/index/icon_chengg.png" class="chengg-icon" />
					提交成功
				</p>
				<div class="like-foot">
					<button class="like-foot-btn like-btn-ljsz" @click="close" >确认</button>
				</div>
			</div>
		</div>
		</div>
	</body>


	<script>
		var vue = new Vue({
			el:"#app",
			data(){
				return {
					image:'',
					phone:'',
					content:'',
					hasnum:200,
					showSuccess:false,
				}
			},
			created(){
			
			},
			methods:{
				submit(){						
					axios.post("/mp/feedback/add",{phone:this.phone,content:this.content,image:this.image}).then(res=>{
						this.showSuccess = true
						this.phone = ''
						this.content = ''
						this.image = ''
					})
				},
				close(){
					this.showSuccess = false
					window.history.go(-1)
				},
				input(e){
					console.log(e)
					this.hasnum = this.content.length
					if(this.hasnum > 199){
						this.content = this.content.slice(0,199)
					}
				},
				openFile(){
					document.getElementById("file").click()
				},
				upload(e){				
					console.log(e)	 
					console.log(e.target,e.target.files)
					let file = e.target.files[0]
					if (file.size > 1024 * 1024 * 100) {
						alert("文件大小不能超过10M")
						return false
					}
					let token =  localStorage.getItem("token")
					let form = new FormData;
					const saveName = `${file.name.replace(/[\+\-\s]/gi, '')}`
					form.append('file', file, saveName)
					let xhr = new XMLHttpRequest();


					xhr.open('post', '/mp/upload/index', true)
					xhr.setRequestHeader('token',token)
					xhr.onreadystatechange=()=>{
						　if ( xhr.readyState == 4 ) {
								if( xhr.status == 200 ){
									console.log(xhr.responseText)
									const response = JSON.parse(xhr.responseText)
									this.image = response.url

								} else if( xhr.status == 511 ){
									window.location.href = host + '/mp/open/auth'
								}
			　　　　} 
					}
					xhr.send(form)

					console.log(file)
				}
			}
		})
	</script>
</html>
